<template>
  <div id="app">
    <div class="register">
      <div class="header">
        <h1>请填写基本信息</h1>
      </div>
      <div class="leve"></div>
      <div class="biaodan">
        <a-form
          :model="form"
          ref="formRef"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :layout="horizontal"
        >
          <a-form-item label="姓名" name="name">
            <a-input v-model:value="form.name" />
          </a-form-item>

          <div class="input_fot">
            <a-form-item label="电话" name="phone">
              <a-input v-model:value="form.phone" />
            </a-form-item>
          </div>

          <div class="input_fot">
            <a-form-item :wrapper-col="{ span: 10, offset: 4 }">
              <a-button
                type="primary"
                @click="onSubmit"
                style="padding: 10px; line-height: 10px"
                >注册</a-button
              >
            </a-form-item>
          </div>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import router from "@router/index.js";
import { reactive, toRefs, ref } from "@vue/reactivity";
import { $Storage } from "@utils/storage.js";
import { register } from "@apis/register.js";
import { $Http } from "@utils/request.js";
// import { message } from 'ant-design-vue';
export default {
  setup() {
    const state = reactive({
      openid: "", //判断小程序项目还是pc项目
      unionid: "", //统一标识符
      form: {
        //输入绑定的值
        name: "",
        phone: "",
      },
      rules: {
        //校验规则
        name: [
          {
            required: true, //必填值
            message: "请填写姓名", //错误提示
            trigger: "change", //失去焦点触发
          },
        ],
        phone: [
          {
            required: true, //必填值
            message: "请填写电话号码", //错误提示
            trigger: "change", //失去焦点触发
          },
        ],
      },
    });

    const { isRegister } = router.currentRoute.value.query;

    if (isRegister === "1") {
      //已注册
      const { token } = router.currentRoute.value.query;
      $Storage.setItem("jwttoken", token); //添加历史记录
      router.push("/home"); //跳转到首页
    } else {
      //未注册
      const { openid, unionid } = router.currentRoute.value.query;
      state.openid = openid;
      state.unionid = unionid;
    }

    //注册接口
    const API_request = (data) => {
      return $Http.request({
          //请求注册接口
          url: register, //请求地址
          method: "POST", //请求类型
          data: {
            data: {
              data
              //后端接收的值
              // name: state.form.name, //姓名
              // phone: state.form.phone, //电话
              // pcopenid: state.openid, //判断小程序项目还是pc项目
              // wxuid: state.unionid, //统一标识符
            },
          },
        })
        // .then((res) => {
        //   console.log(res);
        // });
    };

    const formRef = ref();
    const onSubmit = () => {
      //提交注册
      formRef.value //输入的内容去校验
        .validate() //校验
        .then(async() => {
          await API_request()   //调用注册接口方法
          // if(res.data.code === 1000){     //判断是否请求成功
          //     message.success(res.data.msg);   //成功提示语句
          // }
          //校验通过
          console.log("values", state.form);
        })
        .catch((error) => {
          //校验不通过
          console.log("error", error);
        });
    };

    return {
      ...toRefs(state),
      formRef,
      onSubmit,
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 5,
      },
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#app {
  width: 100%;
  height: 100%;
  position: fixed;
}
.header {
  margin-top: 3vh;
  text-align: center;
}
h1 {
  font-weight: 600;
}
.leve {
  width: 100%;
  height: 1px;
  background-color: #dcdfe6;
  margin-top: 10px;
}
.biaodan {
  position: relative;
  left: 50%;
  top: 3vh;
  transform: translateX(-25%);
}
.input_fot {
  padding-top: 10px;
}
</style>
